<template>
	<div>
		<main class="index">
			<!-- 轮播图 -->
			<div class="banner">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide" style="background-image: url('/static/images/banner1.png')">
						</div>
						<div class="swiper-slide" style="background-image: url('/static/images/banner2.png')">
						</div>
						<div class="swiper-slide" style="background-image: url('/static/images/email/banner.png')">
						</div>
						<div class="swiper-slide" style="background-image: url('/static/images/banner2.png')">
						</div>
						<div class="swiper-slide" style="background-image: url('/static/images/banner1.png')">
						</div>
					</div>
					<!-- Add Pagination -->
					<div class="swiper-pagination"></div>
					<!-- Add Arrows -->
					<!--<div class="swiper-button-next"></div>-->
					<!--<div class="swiper-button-prev"></div>-->
				</div>
			</div>
			<!-- main主体部分 -->
			<div class="main">
				<!--查域名-->
				<div class="searchFrm">
					<div class="container">
						<div class="search-bar">
							<div class="search-txt">在中国每5家
								<div class="search-slider-txt">
									<p class="rili"></p>
									<!--<ul class="search-slider-txt-list">-->
									<!--<li>事业单位</li>-->
									<!--<li class="s">500强企业</li>-->
									<!--<li>政府机关</li>-->
									<!--</ul>-->
								</div>
								有四家在中科三方注册域名
							</div>
							<div class="search-wrap">
								<input type="text" name="keyword" id="keyword" placeholder="请输入您想注册的域名" />
								<select name="com" id="com">
								</select>
								<a href="javaScript:void(0)" class="searchDomain">查域名</a>
							</div>
						</div>
						<div class="common-link">
							<div class="common-link-list">
								<span>常用链接：</span>
								<router-link to="/priceoverview">价格总览</router-link>
								<a href="#">域名解析</a>|
								<a href="#">域名续费</a>|
								<a href="#">域名转入</a>|
								<a href="#">域名信息查询</a>|
								<a href="#">网站备案</a>
								<a href="#">更多 ></a>
							</div>
							<div class="news">
								<ul class="news-list">
									<li>
										<a href="#">11月2日 域名后台维护通知</a>
									</li>
									<li>
										<a href="#">有位非常漂亮的女同事，有天起晚了没有时间化妆便急忙冲到公司。结果那天她被记旷工了。。</a>
									</li>
									<li>
										<a href="#">我能容忍身材是假的，脸是假的，胸是假的，臀是假的！！！但就是不容忍钱是假的！！！！</a>
									</li>
									<li>
										<a href="#">鲜花往往不属于赏花的人，而属于牛粪。</a>
									</li>
									<li>
										<a href="#">永远有多远？你小子就给我滚多远！</a>
									</li>
								</ul>
								<a href="#" class="more">更多></a>
							</div>
						</div>
						<!-- 基础服务 -->
						<div class="basic-service">
							<h1 class="index-title">16年专业品牌，三方为您提供稳定的一站式互联网基础服务</h1>
							<ul class="service-list">
								<li>
									<dl>
										<dt>
                      <div class="auto"><img src="/static/images/icon1.png" alt=""/></div>
                      </dt>
										<dd>
											<h3>域名</h3>
											<p>域名内容的相关介绍，品类丰富，高性价比 易用安全，解析稳定
											</p>
										</dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt>
                      						<div class="auto"><img src="/static/images/icon2.png" alt=""/></div>
                      					</dt>
										<dd>
											<h3>企业建站</h3>
											<p>为企业打通全网营销渠道，PC站，WAP站，微站APP等，定制开发，模板建站快读搞定</p>
										</dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt>
                      <div class="auto"><img src="/static/images/icon3.png" alt=""/></div>
                      </dt>
										<dd>
											<h3>IDC服务</h3>
											<p>为国家域名主节点服务器提供 拖管服务
											</p>
										</dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt>
                      <div class="auto"><img src="/static/images/icon4.png" alt=""/></div>
                      </dt>
										<dd>
											<h3>企业邮箱</h3>
											<p>中共中央党校指定邮箱 业内卫衣双重国家认证及SSL加密传输云镜像加速等
											</p>
										</dd>
									</dl>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- 我们的历史 -->
				<div class="history">
					<!--<video class="video" controls="controls" poster="demo.jpg">-->
					<!--<source src="../static/images/play.mp4" type="video/mp4" />-->
					<!--Your browser does not support the video tag.-->
					<!--</video>-->
				</div>

				<!-- 更高需求 -->
				<div class="more-service">
					<div class="container">
						<h1 class="index-title">三方满足您更高需求的安全服务</h1>
						<ul class="more-service-list">
							<li class="first">
								<dl>
									<dt><img src="/static/images/pic1.png"/></dt>
									<dd>
										<h3>安全服务</h3>
										<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Aenean euisod bibendum laorest.Proin Lorem ipsum dolor sit amet,consectetur adipiacing elit.
										</p>
									</dd>
								</dl>
							</li>
							<li>
								<dl>
									<dt><img src="/static/images/pic2.png"/></dt>
									<dd>
										<h3>服务器证书</h3>
										<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Aenean euisod bibendum laorest.Proin
										</p>
										<div class="pic-list">
											<span><img src="/static/images/icon8.png" alt=""/></span>
											<span><img src="/static/images/icon7.png" alt=""/></span>
										</div>
									</dd>
								</dl>
							</li>
							<li>
								<dl>
									<dt><img src="/static/images/pic3.png"/></dt>
									<dd>
										<h3>网站认证</h3>
										<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Aenean euisod bibendum laorest.Proin.
										</p>
										<div class="pic-list">
											<span><img src="/static/images/icon5.png"/>安全联盟</span>
											<span><img src="/static/images/icon9.png"/>可信网站认证</span>
											<span><img src="/static/images/icon6.png"/>诚信网站认证</span>
										</div>
									</dd>
								</dl>
							</li>
						</ul>
					</div>
				</div>
				<!-- 感谢陪伴 -->
				<div class="appreciate">
					<div class="container">
						<h1 class="index-title">感谢客户一路同行&nbsp;&nbsp;&nbsp;16年品质如一&nbsp;&nbsp;&nbsp;值得信赖</h1>
						<div class="slider-txt">
							<p class="des">Lorem ipsum dolor sit amet,consectetur adipiscing elit.Aenean euismod bibendum laoreet.Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.Proin sodales pulvinar tempor.Cum sociis natoque penatibus et
							</p>
						</div>

						<div class="customNavigation">
							<a class="btn prev">
								<</a>
									<a class="btn next">></a>
						</div>

						<div id="owl-demo" class="owl-carousel owl-theme">
							<div class="item"><img src="/static/images/banner1.png" alt="Owl Image"></div>
							<div class="item"><img src="/static/images/banner2.png" alt="Owl Image"></div>
							<div class="item"><img src="/static/images/banner3.png" alt="Owl Image"></div>
							<div class="item"><img src="/static/images/banner4.png" alt="Owl Image"></div>
							<div class="item"><img src="/static/images/banner1.png" alt="Owl Image"></div>
							<div class="item"><img src="/static/images/banner3.png" alt="Owl Image"></div>
							<div class="item"><img src="/static/images/banner1.png" alt="Owl Image"></div>
							<div class="item"><img src="/static/images/banner1.png" alt="Owl Image"></div>
							<div class="item"><img src="/static/images/banner2.png" alt="Owl Image"></div>
							<div class="item"><img src="/static/images/banner3.png" alt="Owl Image"></div>
							<div class="item"><img src="/static/images/banner4.png" alt="Owl Image"></div>
							<div class="item"><img src="/static/images/banner1.png" alt="Owl Image"></div>
							<div class="item"><img src="/static/images/banner3.png" alt="Owl Image"></div>
							<div class="item"><img src="/static/images/banner1.png" alt="Owl Image"></div>
						</div>
					</div>
				</div>
			</div>
		</main>
		<rightservice></rightservice>
	</div>
</template>

<script>
	import rightservice from './rightservice.vue'
	export default {
		data() {
			return {
				msg: 'index'
			}
		},
		components: {
			rightservice
		},
		methods: {
			//通过录入的关键字查询出相关域名信息列表
			getDomainSuffix() {
				$.ajax({
					url: host + "/setting/queryFrontSetting.do",
					data: {
						"key": "域名查询-域名后缀-第一批"
					},
					dataType: "json",
					success: function(data) {
						if(data) {
							var suffixs = data.split(";");
							var option = "";
							for(var index in suffixs) {
								var suffix = suffixs[index];
								if(suffix) {
									option += '<option value=' + suffix + '>.' + suffix + '</option>';
								}
							}
							$("#com").html(option);
						}
					}
				});
			},
			load() {
				/* 首页轮播图 */
				var swiper = new Swiper('.banner .swiper-container', {
					pagination: '.swiper-pagination',
					paginationClickable: true,
					loop: true,
					spaceBetween: 0,
					centeredSlides: true,
					autoplay: 4000,
					autoplayDisableOnInteraction: false
				});
				/* 公告滚动 */
				var t;
				$(".news").hover(function() {
					clearInterval(t);
				}, function() {
					t = setInterval(function() {
						var ul = $(".news-list");
						var liHeight = ul.find("li:last").height();
						ul.animate({
							marginTop: liHeight + "px"
						}, 1000, function() {
							ul.find("li:last").prependTo(ul);
							ul.find("li:first").hide();
							ul.css({
								marginTop: 0
							});
							ul.find("li:first").fadeIn(300);
						});
					}, 3000);
				}).trigger("mouseleave");
				this.getDomainSuffix();
				var owl = $("#owl-demo");
				owl.owlCarousel({
					navigation: false,
					stopOnHover: true,
					pagination: false,
					paginationNumbers: false,
					items: 5, //10 items above 1000px browser width
					itemsDesktop: [1000, 5], //5 items between 1000px and 901px
					itemsDesktopSmall: [900, 3], // betweem 900px and 601px
					itemsTablet: [600, 2], //2 items between 600 and 0
					itemsMobile: false // itemsMobile disabled - inherit from itemsTablet option
				});
				owl.trigger('owl.play', 2000);
				// Custom Navigation Events
				$(".next").click(function() {
					owl.trigger('owl.next');
				});
				$(".prev").click(function() {
					owl.trigger('owl.prev');
				});

				$(".searchDomain").click(function() {
					var keyword = $("#keyword").val() || '';
					if(!keyword) {
						alert('请输入要查询的域名');
						return false;
					}
					if(keyword.indexOf(".") != -1) {
						alert('域名中不能带有点');
						return false;
					}
					var com = $("#com").val() || '';
					window.location.href = "/domain/domainquery?" + encryptParam("keyword=" + keyword + "&com=" + com);
				})
			}
		},
		mounted() {
			this.load();
		}
	}
</script>
<style>

</style>